<template>
  <div class="set-field-permission">
    <el-dialog
      :title="$t('条件设置')"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div class="set-field-permission-content">
        <el-button icon="el-icon-plus" type="text" v-if="ruleList.length == 0" @click="handleAdd">添加</el-button>
        <div
          class="set-field-permission-content-item"
          v-for="(item, index) in ruleList"
          :key="index"
        >
          <div class="set-field-permission-content-item-condition">
            <el-row class="list-row">
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">{{ $t('如果：') }}</el-col>
                  <el-col :span="20">
                    <el-input
                      @focus="handleCondion(item, index)"
                      v-model="item.ruleTextShow"
                      readonly
                      type="textarea"
                      :rows="4"
                      :placeholder="$t('请选择')"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="11" style="margin-left: 15px">
                <el-col :span="4">{{ $t('则为：') }}</el-col>
                <el-col :span="20">
                  <div class="right-title">
                    <span
                      >{{ $t('【') }}{{ row.pageName }}{{ $t('】 ')
                      }}{{ row.parameterName }}
                    </span>
                    <span class="title-tips">{{ $t('设置以下权限') }}</span>
                  </div>
                  <el-row style="margin-top: 20px">
                    <el-col :span="8">
                      <el-select
                        v-model="item.type"
                        @change="changeType(index)"
                      >
                        <el-option
                          v-for="item in typeOpts"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="16" v-if="item.type != 1">
                      <el-select
                        v-model="item.selectValue"
                        @change="changeData(item, index)"
                        multiple
                        collapse-tags
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-col>
              </el-col>
            </el-row>
          </div>
          <div class="set-field-permission-content-item-opertaion">
            <img
              @click="handleAdd(index)"
              src="@/assets/images/standard/plus_icon.png"
              alt=""
            />
            <img
              @click="handleDel(index)"
              src="@/assets/images/standard/minus_icon.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('取 消') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t('确 定') }}</el-button>
      </span>
    </el-dialog>
    <setCondition
      v-if="optionsVisible"
      v-model="optionsVisible"
      :id="id"
      :currentIndex="currentIndex"
      :rowData="rowData"
      :itemData="itemData"
      @setCondition="setCondition"
    />
  </div>
</template>
<script>
import setCondition from './setCondition.vue'
import api from '@/services/defineContract.js'
import globalService from '@/services/globalService'
export default {
  components: {
    setCondition,
  },
  props: {
    value: Boolean,
    row: {
      type: Object,
      default: () => {
        return {}
      },
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: {},
  },
  data() {
    return {
      dialogVisible: false,
      ruleList: [{ selectValue: [] }],
      currentIndex: null,
      optionsVisible: false,
      itemData: {},
      otherRuleList: [],
      options: [],
      typeOpts: [
        { value: 1, label:'包含全部选项' },
        { value: 2, label: '不包含部分选项' },
        { value: 3, label: '包含部分选项' },
      ],
    }
  },
  async created() {
    this.dialogVisible = this.value
    await this.setData()
  },
  methods: {
    async setData() {
      // 设置下拉值
      if (this.row.parameterValueStr) {
        const info = JSON.parse(this.row.parameterValueStr) || {}
        if (info.enumType == 2) {
          const type = info.relationDataType
          const templateTypeCode = this.row.templateTypeCode
          const res = await globalService.queryProjectDetailRelatedData({
            type,
            templateTypeCode,
          })
          this.options = (res.data.customerInfoList || []).map((it) => {
            return {
              ...it,
              value: it.customerCode || it.companyCode || it.mainUserId || it.id,
              label: it.optionName,
            }
          })
        } else {
          this.options = (info.optionsStr || []).map((it) => {
            return {
              ...it,
              value: it.optionName,
              label: it.optionDesc || it.optionName,
            }
          })
        }
      }
      if (this.row.ruleList && this.row.ruleList.length) {
        // 存储其他的规则
        this.otherRuleList = (this.row.ruleList || []).filter(
          (it) => it.conditionType != 3
        )
        // 取出当前规则
        let ruleList = (this.row.ruleList || []).filter(
          (it) => it.conditionType == 3
        )
        if (ruleList && ruleList.length == 0) {
          ruleList = [{ selectValue: [] }]
        }
        this.ruleList = (ruleList || []).map((it) => {
          // 设置选择
          const info = (it.ruleValue && JSON.parse(it.ruleValue)) || {}
          if (
            ((info.typeList || []).find((its) => its.code == 1) || {})
              .checked == 1
          ) {
            it.type = 1
          }
          if (
            ((info.typeList || []).find((its) => its.code == 2) || {})
              .checked == 1
          ) {
            it.type = 2
          }
          if (
            ((info.typeList || []).find((its) => its.code == 3) || {})
              .checked == 1
          ) {
            it.type = 3
          }
          // 默认值
          it.selectValue = (info.rangeList || []).map((its) => its.code)
          return {
            ...it,
            rangeList: info.rangeList,
          }
        })
      } else {
        this.ruleList = this.ruleList.map((it) => {
          return {
            ...it,
            selectValue: [],
          }
        })
      }
    },
    handleCondion(item, index) {
      this.currentIndex = index
      this.optionsVisible = true
      this.itemData = item
    },
    handleAdd(index) {
      this.ruleList.push({ selectValue: [] })
    },
    handleDel(index) {
      this.ruleList.splice(index, 1)
    },
    handleClose() {
      this.$emit('input', false)
    },
    // 条件设置
    setCondition(data) {
      const info = this.ruleList[data.currentIndex]
      this.$set(this.ruleList, data.currentIndex, {
        ...info,
        ...data,
      })
    },
    changeType(index) {
      this.$set(this.ruleList[index], 'selectValue', [])
    },
    // 多选存储数据
    changeData(data, index) {
      let rangeList = []
      this.options.map((it) => {
        ;(data.selectValue || []).map((its) => {
          if (its == it.value) {
            rangeList.push({
              code: it.value,
              name: it.label,
            })
          }
        })
      })
      this.$set(this.ruleList[index], 'rangeList', rangeList)
    },
    confirm() {
      const ruleList = (this.ruleList || []).map((it, idx) => {
        const typeList = [
          {
            code: 1,
            name: this.$t('包含全部选项'),
            checked: it.type == 1 ? 1 : 0,
          },
          {
            code: 2,
            name: this.$t('包含部分选项'),
            checked: it.type == 2 ? 1 : 0,
          },
          {
            code: 3,
            name: this.$t('不包含部分选项'),
            checked: it.type == 3 ? 1 : 0,
          },
        ]

        const obj = {
          typeList,
          rangeList: it.rangeList,
        }
        return {
          conditionType: 3,
          ruleText: it.ruleText,
          ruleTextShow: it.ruleTextShow,
          ruleValue: JSON.stringify(obj),
          relatedRuleFieldList: it.relatedRuleFieldList,
        }
      })
      // 拼接所有规则
      const data = this.otherRuleList.concat(ruleList)
      this.$emit('setOption', data)
      this.handleClose()
    },
  },
}
</script>
<style lang="scss" scoped>
.set-field-permission {
  &-content {
    width: 100%;
    &-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      &-condition {
        width: 90%;
        background: #faf9f9;
        border-radius: 4px;
        padding: 20px;
        box-sizing: border-box;
        .list-row {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          .title-tips {
            color: #999999;
            margin-left: 10px;
          }
        }
      }
      &-opertaion {
        width: 10%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img {
          width: 32px;
          height: 32px;
          cursor: pointer;
        }
      }
    }
  }
}
::v-deep .el-select__tags {
  max-width: 120px !important;
  flex-wrap: nowrap;
}
</style>
